<template>
  <div class="service-page">
    <div class="service-banner">
      <img src="@/assets/images/banner3.jpg">
    </div>
    <div class="">
      <div class="service-title">我们的服务 <br /> service</div>
      <div class="service-list clearfix">
        <div class="service-block" v-for="(item, idx) in serviceList" :key="idx">
          <div class="service-img">
            <img :src="`/static/images/service${idx+1}.png`" />
          </div>
          <div class="service-info">
            <div class="service-name">{{ item.txt }}</div>
            <div class="service-desc ell2">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="">
      <div class="service-title">我们的特色 <br /> feature</div>
      <div class="feature-list">
        <div class="feature-block" v-for="(item, idx) in featureList" :key="idx">
          <div class="feature-title">{{ item.txt }}</div>
          <div class="feature-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'service',
  data () {
    return {
      serviceList: [
        {
          txt: '信息成绩',
          desc: '务必填写真实信息'
        },
        {
          txt: '地区位置',
          desc: '选择想去的大学所在城市'
        },
        {
          txt: '目标院校',
          desc: '选择院校条件及具体院校'
        },
        {
          txt: '专业选择',
          desc: '选择感兴趣的专业,为你推荐合适你的专业'
        },
        {
          txt: '留学',
          desc: '选择留学国家，留学指导为你详细解读'
        },
        {
          txt: '下载报表',
          desc: ''
        }
      ],
      featureList: [
        {
          txt: '超大的用户使用量支撑',
          desc: '经过2017、2018浙江新高考两年的超10万用户的使用。'
        },
        {
          txt: '各级专业门类完美匹配',
          desc: '能够做到专业从年度招生计划精确匹配、专业门类到大类到二级专业（本专各500多）的精确和模糊查询匹配。专业匹配从两个维度做到了匹配。 '
        },
        {
          txt: '混合位次比算法精准定位',
          desc: '查询结果的算法完全采用混合位次比算法，学生在查询结果可以按照自己喜好进行再次筛选的冲稳保结果查看。有两种下载结果方式可供选择。'
        },
        {
          txt: '电脑手机双端快捷查询',
          desc: '手机端也可以做到志愿查询显示多种查询数据结果（竖屏和横屏显示），且可以将手机的查询分享给需要的考生、家长、老师便于大家在填报志愿上进行交流和沟通讨论。'
        },
        {
          txt: '普通类艺体类一网打尽',
          desc: '金榜题名系统是浙江省新高考志愿填报辅助系统中目前能够完善解决普通类平行志愿填报和艺体类平行志愿填报查询的系统。'
        },
        {
          txt: '高一选课查询快人一步',
          desc: '金榜题名系统能够给高一学生在七选三选课规划时提供未来高考时选课对应可填报志愿的查询，让高一学生做到提前规划高考目标。'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.service-banner{
  img{
    width: 100%;
  }
}
.service-title{
  text-align: center;
  font-size: 15px;
  margin: .4rem /* 15/37.5 */ 0 .213333rem /* 8/37.5 */;
  position: relative;
  &:before, &:after{
    content: '';
    width: .8rem /* 30/37.5 */;
    height: 1px;
    position: absolute;
    background-color: #cccccc;
  }
  &:before{
    top: 0;
    margin-top: -.053333rem /* 2/37.5 */;
    margin-left: -.85rem /* 26/37.5 */;
  }
  &:after{
    margin-left: .213333rem /* 8/37.5 */;
    margin-top: .133333rem /* 5/37.5 */;
  }
}
.service-list{
  padding: .266667rem /* 10/37.5 */;
  padding-bottom: 0;
  .service-block{
    margin-bottom: .213333rem /* 8/37.5 */;
    position: relative;
    border: solid 1px #dddddd;
    width: 48% /* 180/37.5 */;
    min-height: 1.76rem /* 66/37.5 */;
    max-height: 1.813333rem /* 68/37.5 */;
    overflow: hidden;
    float: left;
    margin-right: 4%;
    padding-left: 1.173333rem /* 44/37.5 */;
    &:nth-child(2n) {
      margin-right: 0;
    }
    &:nth-child(1),
    &:nth-child(6) {
      .service-info{
        margin-top: .32rem /* 12/37.5 */;
      }
    }
    .service-img{
      position: absolute;
      left: .08rem /* 3/37.5 */;
      top: .32rem /* 12/37.5 */;
      width: 1rem;
      height: 1rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .service-info{
      margin-top: .213333rem /* 8/37.5 */;
      margin-bottom: .133333rem /* 5/37.5 */;
      .service-name{
        font-size: 14px;
        color: #333;
      }
      .service-desc{
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.feature-list{
  padding: .266667rem /* 10/37.5 */;
  .feature-block{
    margin-bottom: .213333rem /* 8/37.5 */;
    &:last-child{
      margin-bottom: none;
    }
    .feature-title{
      font-size: 14px;
      color: #ff8600;
      position: relative;
      padding-left: .48rem /* 18/37.5 */;
      margin-bottom: .053333rem /* 2/37.5 */;
      &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: .4rem /* 15/37.5 */;
        height: .4rem /* 15/37.5 */;
        background-image: url(../../assets/images/service_star.png);
        background-position: center;
        background-size: cover;
      }
    }
    .feature-desc{
      font-size: 13px;
      color: #333;
    }
  }
}
</style>


